<template>
  <div class="main-content">
    <div class="filter-container">
      <el-button
        size="medium"
        class="filter-item"
        type="primary"
        @click="handleCreate"
        >新增显示字段</el-button
      >
      <el-button
        size="medium"
        class="filter-item"
        type="primary"
        @click="handleCreate1"
        >新增关联显示字段</el-button
      >
      <el-button
        size="medium"
        class="filter-item"
        type="primary"
        @click="importComfirm"
        >导入显示字段</el-button
      >
    </div>
    <p class="maintitle">显示字段列表</p>
    <el-table :data="tableData" border>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column type="index" label="ID" align="center">
      </el-table-column>
      <el-table-column prop="key_name" label="显示字段方向" align="center">
      </el-table-column>
      <el-table-column prop="value" label="显示字段" align="center">
      </el-table-column>
      <el-table-column prop="multiple_char" label="筛选方法" align="center">
      </el-table-column>
      <el-table-column prop="search_char" label="是否为搜索字段" align="center">
      </el-table-column>
      <el-table-column prop="status_char" label="显示字段状态" align="center">
      </el-table-column>
        <el-table-column prop="customer_char" label="客户是否显示" align="center">
      </el-table-column>
      <el-table-column prop="required_char" label="是否必填" align="center">
      </el-table-column>


      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <el-button
            style="margin-right: 10px"
            v-if="row.rid == 0"
            type="text"
            @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button
            style="margin-right: 10px"
            v-else
            type="text"
            @click="handleEdit1(row)"
            >编辑</el-button
          >

          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确定删除字段吗!"
            @confirm="delProperty(row.id)"
          >
            <el-button size="mini" type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="getListData.pageNo"
      :limit.sync="getListData.pageSize"
      @pagination="getList"
    ></pagination>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="form"
        ref="acForm"
        label-position="left"
        label-width="150px"
        :inline="true"
      >
        <el-row>
          <el-form-item label="显示字段方向" prop="key_name">
            <el-input clearable v-model="form.key_name"></el-input>
          </el-form-item>
          <el-form-item label="显示字段方向英文名" prop="key">
            <el-input clearable v-model="form.key"></el-input>
          </el-form-item>
          <el-form-item label="显示字段" prop="value"> <div> <span>提示以“,”区分更多字段</span></div>
            <el-input
              type="textarea"
              :rows="2"
              style="width: 300px"
              clearable
              v-model="form.value"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择筛选方式" prop="is_multiple">
            <el-radio-group v-model="form.is_multiple">
              <el-radio
                v-for="(item, k) in multiple"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否为搜索字段" prop="is_search">
            <el-radio-group v-model="form.is_search">
              <el-radio
                v-for="(item, k) in search"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示字段状态" prop="is_status">
            <el-radio-group v-model="form.is_status">
              <el-radio
                v-for="(item, k) in status"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="客户是否显示" prop="is_customer">
            <el-radio-group v-model="form.is_customer">
              <el-radio
                v-for="(item, k) in cstatus"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否必填" prop="is_required">
            <el-radio-group v-model="form.is_required">
              <el-radio
                v-for="(item, k) in required"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? updateData('') : updateData()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisible1" width="30%">
      <el-form
        :model="form1"
        ref="bcForm"
        label-position="left"
        label-width="150px"
        :inline="true"
      >
        <el-row>
          <el-form-item label="显示字段方向" prop="key_name">
            <el-input clearable v-model="form1.key_name"></el-input>
          </el-form-item>
          <el-form-item label="显示字段方向英文名" prop="key">
            <el-input clearable v-model="form1.key"></el-input>
          </el-form-item>
          <el-form-item label="关联字段" prop="rid">
            <el-select
              v-model="form1.rid"
              placeholder="请选择"
              @change="changeisPro"
            >
              <el-option
                v-for="item in property"
                :key="item.id"
                :label="item.key_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-row v-for="(item, k) in isPro" :key="k">
            <el-form-item :label="item">
              <el-input
                type="textarea"
                :rows="2"
                style="width: 300px"
                clearable
                v-model="form1.valueP[k]"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-form-item label="选择筛选方式" prop="is_multiple">
            <el-radio-group v-model="form1.is_multiple">
              <el-radio
                v-for="(item, k) in multiple"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否为搜索字段" prop="is_search">
            <el-radio-group v-model="form1.is_search">
              <el-radio
                v-for="(item, k) in search"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示字段状态" prop="is_status">
            <el-radio-group v-model="form1.is_status">
              <el-radio
                v-for="(item, k) in status"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="客户是否显示" prop="is_customer">
            <el-radio-group v-model="form1.is_customer">
              <el-radio
                v-for="(item, k) in cstatus"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>


              <el-form-item label="是否必填" prop="is_required">
            <el-radio-group v-model="form1.is_required">
              <el-radio
                v-for="(item, k) in required"
                :key="k"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? updateData1('') : updateData1()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="导入"
      v-loading.fullscreen.lock="loading"
      element-loading-text="正在导入,请稍后..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :visible.sync="importVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-button
        size="medium"
        type="success"
        style="margin-bottom: 10px"
        @click="templateDownload"
        >模板下载</el-button
      >
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :multiple="false"
        :limit="1"
        :auto-upload="false"
        ref="upload"
        :http-request="importProperty"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          *只能上传一个文件，若需修改请删除原文件后重新上传
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImport">导入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { mapState } from "vuex";
import {
  propertyList,
  saveProperty,
  property,
  saveProRelation,
  delProperty,
  importProperty,
} from "@/app/api/system";
import Pagination from "@/app/components/Pagination";

export default {
  components: {
    Pagination,
  },
  name: "property",
  data() {
    return {
      importVisible: false,
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      dialogVisible1: false,
      form: {},
      form1: {
        valueP: [],
      },
      dialogStatus: "", //编辑或新增
      textMap: {
        update: "编辑",
        create: "新增",
      },
      baseurl: api_url,
      multiple: [
        {
          label: "单选",
          value: "0",
        },
        {
          label: "多选",
          value: "1",
        },
      ],
      search: [
        {
          label: "是",
          value: "1",
        },
        {
          label: "否",
          value: "0",
        },
      ],
      status: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "停用",
          value: "1",
        },
      ],
      cstatus: [
        {
          label: "显示",
          value: "0",
        },
        {
          label: "隐藏",
          value: "1",
        },
      ],
      required:[
         {
          label: "选填",
          value: "0",
        },
        {
          label: "必填",
          value: "1",
        },
      ],

      property: [],
      isPro: [],
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    this.getList();
    this.propertyL();
  },
  methods: {
    getList() {
      propertyList(this.getListData)
        .then((res) => {
          this.tableData = res.data.ret;
          this.totalPage = res.data.count;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    propertyL() {
      property()
        .then((res) => {
          this.property = res.data;

          console.log(this.property);
        })
        .catch((error) => {
          console.log("property error", error);
        });
    },
    handleCreate() {
      this.form = {};
      this.dialogStatus = "create";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["acForm"].clearValidate();
      });
    },
    handleEdit(row) {
      this.form = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["acForm"].clearValidate();
      });
    },
    updateData(id) {
      this.$refs["acForm"].validate((valid) => {
        if (valid) {
          if (id) {
            this.form.id = id;
          }
          
          saveProperty(this.form)
            .then((res) => {
              if (res.code == "00000") {
                Message({
                  message: "操作成功",
                  type: "success",
                  duration: 2 * 1000,
                });
                this.getList();
                this.propertyL();
                this.dialogVisible = false;
              }
            })
            .catch((error) => {
              console.log("saveProperty error", error);
            });
        } else {
          return false;
        }
      });
    },
    changeisPro(value) {
      this.property.forEach((e) => {
        if (value == e.id) {
          this.isPro = e.value;
        }
      });
    },
    updateData1(id) {
      this.$refs["bcForm"].validate((valid) => {
        if (valid) {
          if (id) {
            this.form1.id = id;
          }
          saveProRelation(this.form1)
            .then((res) => {
              if (res.code == "00000") {
                Message({
                  message: "操作成功",
                  type: "success",
                  duration: 2 * 1000,
                });
                this.getList();
                this.dialogVisible1 = false;
              }
            })
            .catch((error) => {
              console.log("saveProRelation error", error);
            });
        } else {
          return false;
        }
      });
    },

    handleCreate1() {
      this.form1 = {
        valueP: [],
      };
      this.isPro = [];
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs["bcForm"].clearValidate();
      });
    },
    handleEdit1(row) {
      this.form1 = Object.assign({}, row);
      this.changeisPro(row.rid);
      // this.dialogStatus = "update";
      this.dialogVisible1 = true;
      this.$nextTick(() => {
        this.$refs["bcForm"].clearValidate();
      });
    },

    delProperty(id) {
      delProperty({ id: id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "删除成功",
              type: "success",
              duration: 2 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("delProperty error", error);
        });
    },
    importComfirm() {
      this.importVisible = true;
      this.$nextTick(() => {
        this.$refs["upload"].clearFiles();
      });
    },
    confirmImport() {
      this.loading = true;
      this.$nextTick(() => {
        this.$refs.upload.submit();
      });
    },
    importProperty(param) {
      const fileObj = param.file;
      const form = new FormData();
      form.append("file", fileObj);
      importProperty(form)
        .then((res) => {
          console.log("importProperty res", res);
          Message({
            message: "导入成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.loading = false;
          this.importVisible = false;
          this.getList();
        })
        .catch((error) => {
          console.log("importProperty error", error);
          this.loading = false;
          this.importVisible = false;
        });
    },
    templateDownload() {
      window.location.href = this.baseurl + "/template/字段导入.xlsx";
    },
  },
};
</script>
<style>
.main-content{
  width: 99%;
  /* height: 840px; */
  margin: 1% auto;
  border-radius: 10px;
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.25);
  background-color: #fbfbfb;
  padding: 0px;
  position: relative;
}
.maintitle{
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  color: #000000;
  margin: 10px 0 20px 10px;
}
</style>
